<template>
	<view class="content">
		<!-- <view class="cate-wrap" scroll-x="true">
			<text v-for="(v, i) in cateList" :key="i" class="cate-item">
				{{ v.name }}
			</text>
		</view>
		<InfoTip v-if="pageLoading && !list.length"/> -->
		<view class="order-con">
			<view class="order-item">
				<view class="status">
					<text class="type">xxxx店铺</text>
					<text>2011-21-21 22:22:22</text>
				</view>
				<view v-for="(v, i) in list" :key="i" class="info">
					<image
						lazy-load mode="aspectFill"
						src="https://img1.baidu.com/it/u=93999198,3109633459&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1674320400&t=c430c9e189a9797cd0ec73b5a27946ec"
						class="img"
					></image>
					<view class="info-con">
						<text class="title">大萨达撒撒多撒</text>
						<text class="desc">大顺风撒打算</text>
						<view class="price-wrap">
							<text class="price">￥22.00</text>
							<text>x2</text>
						</view>
					</view>
				</view>
			</view>

			<view class="order-i">
				<view class="i-item title">
					<text>
						商品总价
					</text>
					<text>
						￥22.00
					</text>
				</view>
				<view class="i-item">
					<text>
						店铺优惠
					</text>
					<text>
						￥22.00
					</text>
				</view>
				<view class="i-item red">
					<text>
						实付款
					</text>
					<text>
						￥22.00
					</text>
				</view>
			</view>

			<view class="order-res">
				<view class="i-item">
					<text class="label">
						订单编号
					</text>
					<text class="right">
						￥22.00
					</text>
				</view>
				<view class="i-item">
					<text class="label">
						支付宝交易号
					</text>
					<text class="right">
						2011-21-21 22:22:22
					</text>
				</view>
				<view class="i-item">
					<text class="label">
						付款时间
					</text>
					<text class="right">
						2011-21-21 22:22:22
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import InfoTip from '@/components/InfoTip/index.vue';

export default {
	components: {
		InfoTip
	},
	data() {
		return {
			list: [1, 2,3,4,5,6,7,87],
			cateList: [{
				name: '全部',
				status: '1'
			},{
				name: '已支付',
				status: '1'
			},{
				name: '待支付',
				status: '1'
			},{
				name: '已完成',
				status: '1'
			},{
				name: '已取消',
				status: '1'
			}],
			pageLoading: true,
		}
	},
	onReachBottom: function() {
		// Do something when page reach bottom.
	},
	methods: {
		getList() {

		},
		fetch() {

		}
	}
}
</script>

<style lang="stylus" scoped>
.cate-wrap
	display flex
	flex-wrap nowrap
	justify-content space-between
	padding 30rpx
	background #fff
	.cate-item
		font-size 28rpx

.order-con
	padding 20rpx 30rpx 1rpx

	.order-item
		background #fff
		border-radius 8rpx
		padding 30rpx
		margin-bottom 24rpx

		.status
			display flex
			justify-content space-between
			align-items center

			.type
				font-weight 500
				font-size 30rpx

		.info
			display flex
			margin-top 30rpx
			.img
				width 180rpx
				height 180rpx

			.info-con
				flex 1 0 0
				height 180rpx
				display flex
				flex-direction column
				margin-left 20rpx

				.title
					font-size 28rpx

				.desc
					color #999

				.price-wrap
					margin-top auto
					display flex
					justify-content space-between

					.price
						font-size 32rpx
						color #F52711
						font-weight 500

			.all-price-wrap
				margin-top auto
				display flex
				justify-content space-between

				.price
					font-size 32rpx
					color #F52711
					font-weight 500


	.order-i
		display flex
		background #fff
		border-radius 8rpx
		padding 30rpx
		margin-bottom 24rpx
		flex-direction column

		.i-item
			display flex
			justify-content space-between
			margin-bottom 32rpx

			&.title
				font-weight 500
				margin-bottom 48rpx
				font-size 30rpx

			&.red
				color #F52711
				font-weight 500

	.order-res
		display flex
		background #fff
		border-radius 8rpx
		padding 30rpx
		margin-bottom 24rpx
		flex-direction column

		.i-item
			display flex
			justify-content space-between
			margin-bottom 32rpx

			&.title
				font-weight 500
				margin-bottom 48rpx
				font-size 30rpx

			&.red
				color #F52711
				font-weight 500
</style>
